<template>
  <div>
    <leftRightSplit :left-span="4">
      <template #left>
        <ContentWrap title="菜单目录">
          <el-tree
            ref="menus"
            :data="menus"
            :default-expand-all="true"
            :highlight-current="true"
            :expand-on-click-node="false"
            :current-node-key="chioseKey"
            style="width: 100%"
            :check-strictly="false"
            node-key="key"
            @node-click="chioseMenu"
          >
            <template #default="{ node, data }">
              <div class="slot-t-node">
                <Icon
                  v-if="data.style"
                  :icon="data.style.icon"
                  :color="data.style.color"
                  style="margin-right: 5px"
                />
                <span>{{ node.label }}</span>
              </div>
            </template>
          </el-tree>
        </ContentWrap>
      </template>
      <template #right>
        <ContentWrap :title="title">
          <div class="app-container">
            <Search
              ref="search"
              :schema="scheme"
              :model="queryParam"
              :is-col="false"
              layout="inline"
              :showSearch="true"
              button-position="left"
              :search-loading="loading"
              :reset-loading="loading"
              @search="handleSearch"
              @reset="handleSearch"
            >
              <template #opts>
                <BaseButton type="success" v-hasPermi="'add'" @click="addPower"
                  >添加菜单</BaseButton
                >
              </template>
            </Search>
          </div>
          <Table :data="dataList" :columns="columns" row-key="Id" @change="loadPower">
            <template #Icon="e">
              <Icon v-if="e.row.Icon" :icon="e.row.Icon" />
            </template>
            <template #IsEnable="e">
              <el-switch
                v-model="e.row.IsEnable"
                :disabled="$hasPermi('set') == false"
                active-text="启用"
                inactive-text="停用"
                @change="setState(e.row)"
              />
            </template>
            <template #Sort="e">
              <el-input-number
                :disabled="$hasPermi('set') == false"
                v-model="e.row.Sort"
                style="width: 150px"
                placeholder="排序位"
                @change="setPowerSort(e.row)"
              />
            </template>
            <template #PowerType="e">
              <span v-if="e.row.PowerType == 0">菜单</span>
              <span v-else-if="e.row.PowerType == 1">目录</span>
            </template>
            <template #action="e">
              <BaseButton
                v-if="e.row.PowerType == 0"
                size="small"
                type="primary"
                title="操作权限"
                :icon="settingIcon"
                circle
                @click="showPower(e.row)"
              />
              <template v-if="e.row.LinkType == null || e.row.LinkType == ''">
                <BaseButton
                  v-if="!e.row.IsEnable"
                  v-hasPermi="'set'"
                  size="small"
                  type="primary"
                  title="编辑菜单"
                  :icon="editIcon"
                  circle
                  @click="editPower(e.row)"
                />
                <BaseButton
                  v-if="!e.row.IsEnable"
                  size="small"
                  type="danger"
                  v-hasPermi="'delete'"
                  title="删除菜单"
                  :icon="dropIcon"
                  circle
                  @click="dropPower(e.row)"
                />
              </template>
            </template>
          </Table>
        </ContentWrap>
      </template>
    </leftRightSplit>
    <editPower
      :id="id"
      v-model:visible="visible"
      :sub-system="subSystem"
      :parent-id="queryParam.ParentId"
      :sub-system-id="queryParam.SubSystemId"
      @close="closePower"
    />
    <editOperatePower :power-id="id" v-model:visible="opVisible" :power-name="powerName" />
  </div>
</template>

<script>
import { GetTrees, GetPowerTrees, SetSort, Delete, SetIsEnable } from '@/api/role/power'
import { HrEnumDic } from '@/config/publicDic'
import { Table } from '@/components/Table'
import { useIcon } from '@/hooks/web/useIcon'
import { Search } from '@/components/Search'
import editPower from './components/editPower.vue'
import editOperatePower from './components/editOperatePower.vue'
export default {
  components: {
    Table,
    Search,
    editPower,
    editOperatePower
  },
  data() {
    return {
      loading: false,
      dropIcon: useIcon({ icon: 'ep:delete' }),
      editIcon: useIcon({ icon: 'ep:edit' }),
      settingIcon: useIcon({ icon: 'ep:setting' }),
      title: '新增菜单',
      menus: [],
      dataList: null,
      visible: false,
      subSystem: null,
      powerName: null,
      opVisible: false,
      id: null,
      scheme: [
        {
          field: 'QueryKey',
          label: '菜单名',
          component: 'Input',
          componentProps: {
            maxLength: 50,
            placeholder: '菜单名'
          }
        },
        {
          field: 'IsEnable',
          label: '启用状态',
          component: 'Select',
          componentProps: {
            placeholder: '启用状态',
            options: [
              {
                label: '全部',
                value: null
              },
              {
                label: '启用',
                value: true
              },
              {
                label: '未启用',
                value: false
              }
            ]
          }
        },
        {
          field: 'PowerType',
          label: '菜单类型',
          component: 'Select',
          componentProps: {
            placeholder: '菜单类型',
            multiple: true,
            options: [
              {
                label: '目录',
                value: 1
              },
              {
                label: '菜单',
                value: 0
              }
            ]
          }
        }
      ],
      queryParam: {
        SubSystemId: null,
        QueryKey: null,
        ParentId: null,
        PowerType: null,
        IsEnable: null
      },
      paging: {
        Size: 20,
        Index: 1,
        SortName: 'Id',
        IsDesc: false,
        Total: 0
      },
      chioseKey: null,
      maxSort: 1,
      columns: [
        {
          key: 'Icon',
          label: '图标',
          align: 'left',
          slotName: 'Icon',
          width: 100
        },
        {
          field: 'Name',
          label: '权限名',
          align: 'left',
          width: 200
        },
        {
          field: 'PowerType',
          label: '权限类型',
          align: 'center',
          slotName: 'PowerType',
          width: 80
        },
        {
          field: 'RouteName',
          label: '页面路由名',
          align: 'left',
          width: 150
        },
        {
          field: 'IsEnable',
          label: '是否启用',
          align: 'center',
          slotName: 'IsEnable',
          width: 200
        },
        {
          field: 'Sort',
          label: '排序位',
          align: 'center',
          slotName: 'Sort',
          width: 200
        },
        {
          field: 'Description',
          label: '说明',
          align: 'left',
          minWidth: 150
        },
        {
          field: 'Action',
          label: '操作',
          align: 'left',
          slotName: 'action',
          width: 200
        }
      ]
    }
  },
  computed: {},
  mounted() {
    this.loadTrees()
  },
  methods: {
    handleSearch(data) {
      this.queryParam.QueryKey = data.QueryKey
      this.queryParam.IsEnable = data.IsEnable
      this.queryParam.PowerType = data.PowerType
      this.loadPower()
    },
    addPower() {
      this.id = null
      this.visible = true
    },
    showPower(row) {
      this.id = row.Id
      this.powerName = row.OperateName
      this.opVisible = true
    },
    async setState(row) {
      await SetIsEnable(row.Id, row.IsEnable)
      this.$message({
        type: 'success',
        message: '保存成功!'
      })
    },
    editPower(row) {
      this.id = row.Id
      this.visible = true
    },
    closePower(isRefresh) {
      if (isRefresh) {
        this.loadPower()
      }
    },
    async setPowerSort(row) {
      await SetSort(row.Id, row.Sort)
      this.$message({
        type: 'success',
        message: '保存成功!'
      })
    },
    reset() {
      this.queryParam.QueryKey = null
      this.queryParam.IsShowAll = true
      this.queryParam.IsEnable = true
      this.queryParam.PowerType = null
      this.loadPower()
    },
    chioseMenu(e) {
      this.title = e.label + '菜单列表'
      if (
        e.type === 'isSubSystem' &&
        (e.key !== this.queryParam.SubSystemId || this.queryParam.ParentId != null)
      ) {
        this.subSystem = e.label
        this.queryParam.SubSystemId = e.key
        this.queryParam.ParentId = null
      } else if (e.type === 1 && e.key !== this.queryParam.ParentId) {
        const sub = this.menus.find((c) => c.key === e.sysId)
        this.queryParam.SubSystemId = sub.key
        this.subSystem = sub.label
        this.queryParam.ParentId = e.key
      } else {
        return
      }
      this.loadPower()
    },
    async loadPower() {
      this.dataList = await GetPowerTrees(this.queryParam)

      const t = this.dataList.reduce((max, current) => Math.max(max.Sort, current.Sort), -Infinity)
      this.maxSort = t.Sort
    },
    async loadTrees() {
      const list = await GetTrees({
        PowerType: 1
      })
      if (this.chioseKey == null) {
        const subSys = list[0]
        this.chioseKey = subSys.SubSysId
        this.subSystem = subSys.SubSysName
        this.queryParam.SubSystemId = this.chioseKey
        this.title = subSys.SubSysName + '菜单列表'
      }
      this.menus = list.map((c) => {
        const t = {
          key: c.SubSysId,
          type: 'isSubSystem',
          label: c.SubSysName,
          style: {
            icon: 'ep:house',
            color: '#f56c6c'
          }
        }
        t.children = this.getPowers(c.Powers, c.SubSysId)
        return t
      })
      this.loadPower()
    },
    dropPower(row) {
      const title = '确认删除菜单 ' + row.Name + '?'
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitDrop(row)
      })
    },
    async submitDrop(row) {
      await Delete(row.Id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.loadPower()
      if (row.PowerType === 1) {
        this.loadTrees()
      }
    },
    getPowers(list, sysId) {
      return list.map((c) => {
        const t = {
          key: c.Id,
          type: c.PowerType,
          label: c.Name,
          sysId: sysId
        }
        if (c.PowerType === 1) {
          t.style = {
            icon: 'ep:folder',
            color: '#409eff'
          }
        }
        if (c.Children && c.Children.length !== 0) {
          t.children = this.getPowers(c.Children, sysId)
        }
        return t
      })
    }
  }
}
</script>
